<template>
	<view class="homePage">
		<!-- #ifndef MP -->
		<!-- 固定在顶部的导航栏 -->
		<!-- 搜索导航 -->
		<uni-nav-bar fixed="true" right-icon="scan" shadow="false" @click-right="scan">
			<block slot="left">
				<view class="nav-bar-img">
					<image src="../../static/img/index1/u53.png" mode=""></image>
				</view>
			</block>

			<view class="nav-input-view">
				<view class="input-view">
					<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="枯山水系列白瓷茶器" />
					<view class="uni-icon uni-icon-search search-icon"></view>
				</view>
				<uni-icon class="uni-icon-shop" type="pengyouquan" size="22" color="#666666"></uni-icon>
			</view>
		</uni-nav-bar>
		<!-- 使用非原生导航栏后需要在页面顶部占位 -->
		<view class="StatusBarHeightCss"></view>
		<view style="height:44px"></view>
		<!-- #endif -->
		<!-- 轮播图 -->
		<view class="swiper-image">
			<swiper indicator-dots="true">
				<swiper-item v-for="(img,key) in imgUrls" :key="key">
					<image :src="img" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 分段器 -->

		<!-- #ifndef MP -->
		<!-- <view style="height: 40px;"></view> -->
		<!-- #endif -->
		
		
		<view class="seg-padding-wrap" :style="segmentStyle">
			<uni-segmented-control :current="currentItem" :values="items" v-on:clickItem="onClickItem" styleType="text"
			 activeColor="#d4010e"></uni-segmented-control>
		</view>

		<view class="item-content">
			<view v-show="currentItem === 0">
				<shop-item-list :shopItems="mediaList" @clickItem="onProductDetail"></shop-item-list>
			</view>
			<view v-show="currentItem === 1">
				选项卡2的内容
			</view>
		</view>
		<view class="contact">
			<image src="../../static/img/index1/u75.png" mode=""></image>
			<text>客服</text>
		</view>
	</view>

</template>

<script>
	import uniNavBar from "components/uni-nav-bar.vue"
	import uniIcon from "components/uni-icon.vue"
	import uniSegmentedControl from 'components/uni-segmented-control.vue';
	import shopItemList from 'components/templates/shop-item-list.vue'
	
	export default {
		components: {
			uniNavBar,
			uniIcon,
			uniSegmentedControl,
			shopItemList
		},
		onReady() {

			uni.createSelectorQuery().select(".seg-padding-wrap").boundingClientRect(data => {
				// console.log("得到布局位置信息" + JSON.stringify(data));
				// console.log("节点离页面顶部的距离为" + data.top);
				this.dingHeight = data.top
			}).exec()

		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
					var navHight = res.statusBarHeight + 44;
					this.StatusBarHeightCss = "height:" + navHight + "px";
					
					// #ifdef MP
					this.segmentStyle = "top: 0px;"
					// #endif
					
					// #ifndef MP
					this.segmentStyle =  "top:" + navHight + "px;"
					// #endif
					// console.log(this.segmentStyle);
				}
			});
		},
		data() {
			return {
				StatusBarHeightCss: "",
				imgUrls: [
					"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg",
					"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
				],
				items: [
					"最新",
					"非遗",
					"科技",
					"餐饮",
					"充值卡"
				],
				currentItem: 0,
				"mediaList": [{
					"id":11,
					"img": "../../static/img/index1/u33.png",
					"title": "「鹿语」黄铜印章 | 君子之风，雅致之礼 手工器物，古法铸造",
					"price": "288"
				}, {
					"id":12,
					"img": "../../static/img/index1/u40.jpg",
					"title": "溯芳斋曜变大师陆金喜柴烧押窑",
					"price": "1588"
				}, {
					"id":13,
					"img": "../../static/img/index1/u36.jpg",
					"title": "顾景舟【洋桶】紫砂壶怀旧复刻",
					"price": "1280"
				}, {
					"id":14,
					"img": "../../static/img/index1/u44.jpg",
					"title": "福聚号—原创鲁青釉半球形茶壶",
					"price": "168"
				}],
				segmentStyle: "",
				dingHeight: 0,
				statusBarHeight: 0, //状态栏的高度
				
			}
		},
		// onPageScroll(e) {
			// 			var s = " position:fixed;top:64px;z-index:999;"
			// 			var h = this.dingHeight
			// 			// #ifdef MP
			// 			s = "position:fixed;top:0px;z-index:999;"
			// 			// s=  ""
			// 			// h = h - 40
			// 			// #endif
			// 
			// 			// #ifndef MP
			// 			var hh = 44 + this.statusBarHeight
			// 			h = this.dingHeight - hh
			// 			// s = " position:fixed;top:" + hh + "px;z-index:999;"
			// 			s = " position:fixed;top:" + hh + "px;"
			// 			// #endif
			// 
			// 			if (e.scrollTop >= h) {
			// 				this.segmentStyle = s
			// 			} else {
			// 				this.segmentStyle = ""
			// 			}

			// console.log(e.scrollTop+"   " +this.statusBarHeight+ "    " + h + "    " + this.segmentStyle);
		// },
		methods: {
			onClickItem(index) {
				console.log("item:" + index);
				if (this.currentItem !== index) {
					this.currentItem = index;
				}
				this.currentItem = 0
			},
			onProductDetail(item){
				// console.log(item)
				uni.navigateTo({
					url:"/pages/home/product-detail"+"?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.homePage {
		// border: 1px solid red;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.homePage {
		
		.StatusBarHeightCss{
			height: var(--status-bar-height)
		}

		//因为导航栏是 固定像素的 所以都是用 px
		.nav-bar-img {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-left: 8px;
		}

		.nav-bar-img image {
			width: 67px;
			height: 21px;
		}

		.nav-input-view {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between
		}

		.uni-icon-shop {
			line-height: 40upx;
		}

		.input-view {
			width: 90%;
			display: flex;
			/* background-color: #e7e7e7; */
			height: 30px;
			border-radius: 15px;
			padding: 0 4%;
			flex-wrap: nowrap;
			margin: 7px 4%;
			line-height: 30px;
			border: 1px solid #d7d7d7;
		}

		.search-icon {
			display: flex;
			/* border:1px solid red; */
			color: #666666;
			font-size: 24px;
			line-height: 30px !important;
		}

		.input-view input {
			height: 30px;
			line-height: 30px;
			width: 94%;
			padding: 0 3%;
			/* border: 1px solid #d7d7d7; */
		}

		/* 导航栏 */

		.seg-padding-wrap {
			width: 100%;
			box-sizing: border-box;
			padding: 10upx 30upx;
			background-color: rgba(242, 242, 242, 1);
			color: #333;
			position: sticky;
			
		}

		.swiper-image image,
		swiper {
			width: 750upx;
			height: 500upx;
		}

		.item-content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex: 1;
			/* align-items: center; */
			/* height: 300upx; */
			/* text-align: center; */
		}

		//
		.contact {
			position: fixed;
			right: 4%;
			bottom: 10%;
			background-color: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(194, 77, 80, 1);
			border-radius: 5px;
			font-weight: 400;
			font-style: normal;
			color: #C24D50;
			text-align: center;
			display: flex;
			flex-direction: column;
			padding: 5upx;
		}
		
		.contact image {
			width: 37px;
			height: 35px;
		}
		
		.contact text {
			font-size:28upx; 
		}
	}
</style>
